import { Button, Modal } from "antd";
import { ReactNode } from "react";
import { ModalProps } from 'antd';

type Props = {
  showCancelBtn?: boolean;
  showOkBtn?: boolean;
} & ModalProps;

const CommonModal = ({
  open,
  title,
  className,
  okText,
  cancelText,
  showCancelBtn,
  showOkBtn,
  width,
  onOk,
  onCancel,
  children
}: Props) => {
  return (
    <Modal
      title={title}
      centered
      open={open}
      onOk={onOk}
      onCancel={onCancel}
      className={className}
      closable={false}
      width={width}
      footer={
        <div className="flex justify-center items-center flex-col">
          {
            (showOkBtn == true || showOkBtn == undefined) && (
              <Button type="primary"
                className={`w-3/4 font-bold text-lg ${showCancelBtn == false ? 'mb-10' : ''}`}
                style={{ height: '45px', borderRadius: '50px' }}
                onClick={onOk}>
                {okText ?? '确定'}
              </Button>
            )
          }
          {
            (showCancelBtn == true || showCancelBtn == undefined) && (
              <Button type="text" className="mt-5" onClick={onCancel}>
                {cancelText ?? '取消'}
              </Button>
            )
          }

        </div>
      }
    >
      <div className="flex flex-col items-center w-full" >
        {children}
      </div>
    </Modal>
  );
};

export default CommonModal;
